<template>
  <div class="home">
    <div class="header van-hairline--bottom">
      <div class="header-one">
        <span>蜜芽</span>
        <h3>进口母婴正品特卖</h3>
      </div>
    </div>
    <!-- 轮播图 -->
    <!-- {{picur}} -->
    <van-swipe class="my-swipe"  indicator-color="white">
      <van-swipe-item v-for="(v,i) in picur" :key="i">
        <img class="picur" :src="v.img" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 限时秒杀 -->
    <!-- 秒杀商品 -->
    <slip></slip>
    <!-- <div class="xs">
      <span class="more">更多秒杀</span>
      <div class="time"></div>
    </div>
    <div class="seckill">
      <div class="sectitle"></div>
      <div class="seckilltime">
        <div v-for="item in 6" :key="item">
          <p class="time">19:00</p>
          <p class="zuo">昨日精选</p>
        </div>
      </div>
    </div>-->

    <div class="guarantee">
      <div class="m-title m-title-guarantee">给孩子买安心，蜜芽100%正品保证</div>
      <guarantee></guarantee>
    </div>

    <div class="pt">
      <div class="pttitle">
        <div class="lt">
          <div class="icon-tit"></div>
        </div>
        <div class="rt">
          <span>130万</span>
          达人妈妈都在团
        </div>
      </div>
      <groups></groups>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll"; //导入better-scroll
import { mapActions, mapState } from "vuex";
import Vue from "vue";
import { Lazyload } from "vant";
export default {
  name: "Home",
  layout: true,
  data() {
    return {};
  },
  computed: {
    ...mapState("silder", ["picur"]),
  },
  methods: {
    ...mapActions("silder", ["getpicurs"]),
  },
  mounted() {
    this.getpicurs();
  },
};
</script>

<style scoped>
.home {
  position: absolute;
  top: 0;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}


.person-list {
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  height: 20px;
}
.person-list .person-item {
  display: inline-block;
  width: 200px;
}

.header {
  height: 0.6rem;
}

.van-hairline--bottom::after {
  border-bottom-width: 3px;
}

.header-one {
  height: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-one span {
  font-size: 0.3rem;
  color: orangered;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}

.m-title {
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}

.m-title.m-title-guarantee:before {
  background-position: 0 0;
}

.m-title:before {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -2px;
  content: "";
  margin-right: 3px;
  width: 20px;
  height: 20px;
  background: url(https://img.miyabaobei.com/d1/p4/2016/09/23/5e/ff/5eff7c11f9747793520ee91ae1591d53134191891.png)
    no-repeat;
  background-size: auto 20px;
}

.pttitle {
  padding: 0 0.2667rem;
  line-height: 0.5333rem;
  font-size: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rt span {
  color: #ea4141;
  font-weight: 700;
}

.icon-tit {
  width: 3rem;
  height: 0.3rem;
  background: url(https://img.miyabaobei.com/d1/p5/2017/05/31/fe/10/fe101a9f87e24c1af0784f7a9d28b430244043045.png)
    no-repeat;
  background-size: 2.1333rem auto;
}

.picur{
  height: 100%;
  width: 100%;
}
</style>
